<!DOCTYPE html>  
  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>  
  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 100%;height: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="cityMap.js"></script>
    <script type="text/javascript" src="shanxi_data.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        require.config({  
            paths: {  
                echarts: 'http://echarts.baidu.com/build/dist'  
            }  
        });  
  			var convertData = function (data) {
				    var ds = [];
				    for(var i = 0;i<data.length;i++){
				    	ds[i] = {};
				    	ds[i].name = data[i].name;
				    	ds[i].value = data[i].f();
				    }
				    return ds;
				};
				console.log(data[1])
        // 使用  
        require(  
            [  
                'echarts',  
                'echarts/chart/map'
            ],
            function(echarts) {  
                // 基于准备好的dom，初始化echarts图表  
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {  
                        text: '2013年陕西科技人才分布情况',
                        x:'80',
                        y:'60',
                        textStyle:{color:'#FFF',fontSize: 22}
                    },
                    tooltip: {  
                        trigger: 'item'
                    },  
                    legend: {
                    	show:false,
	                    orient: 'vertical',  
	                    x: 'left',  
	                    data: ['科技人才'],  
                    },
                    backgroundColor: '#0A0F23',
                    dataRange: {
                        x: '10%',
                        y: '65%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitList: [{  
                            start: 100000
                        },{
                            start: 75000,
                            end: 100000
                        }, {
                            start: 50000,
                            end: 75000,
                        }, {
                            start: 50000,
                            end: 25000,
                        }, {
                            end: 25000
                        }],  
                        color: ['#264c82']
                    },
                    series: [{  
                        name: '科技人才',  
                        type: 'map',  
                        mapType: '陕西',  
                    		mapLocation: {
                    			y:'10%',
                    			x:'35%'
                    		},
                        selectedMode: 'single',  
                        itemStyle: {  
	                        normal: {  
	                            label: {  
	                                show: true,  
	                                textStyle: {  
					                            color: '#fff',
					                            fontSize: 16
	                                }  
	                            }
	                        },  
	                        emphasis: { 
	                        	label: {
	                        		show: true,
	                            textStyle: {  
				                            color: '#fff',
				                            fontSize: 16
	                            }
	                          }
	                        }
                        },  
                        data: convertData(data)
                    }]
                };
                var i = 1;
				        setInterval(function(){
				        	if(option){
				        		var year = (i%5+2013)+"年陕西科技人才分布情况";
				        		option.title.text = year;
				        		myChart.clear();
				        		option.series[0] = {  
                        name: '科技人才',  
                        type: 'map',  
                        mapType: '陕西',   
                    		mapLocation: {
                    			y:'10%',
                    			x:'35%'
                    		},
                        selectedMode: 'single',  
                        itemStyle: {  
                            normal: {  
                                label: {  
                                    show: true,  
                                    textStyle: {  
					                            color: '#fff',
					                            fontSize: 16 
                                    }  
                                },  
                            },  
                            emphasis: { label: { show: true } },  
                        },  
                        data: convertData(data)
                    }
				        		myChart = echarts.init(document.getElementById('main'));
				        		myChart.setOption(option);
				        		i++;
				        	}
				        }, 2000);
                myChart.setOption(option);  
            }  
        );  
    </script>  
</body>